<template>
  <div class="node-panel">
    <template v-for="(i, key) in nodeArr">
      <div class="node-name">{{ i.groupTitle }}</div>
      <div class="node-list">
        <div class="node-item" v-for="item in i.nodesList" :key="item.text" @mousedown.stop.prevent="$_dragNode(item)">
          <div class="node-item-icon" :class="item.class">
            <img :src="item.icon || defaultIcon" alt="" style="width: 100%; height: 100%; border-radius: 8px" />
          </div>
          <span class="node-label">{{ item.text }}</span>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
let defaultIcon = require('../background/default.svg')

export default {
  name: 'NodePanel',
  props: {
    nodeArr: {
      type: Array,
      default: () => [],
      // default: () => [
      //   {
      //     groupTitle: "基础组件",
      //     nodesList: [
      //       {
      //         text: "开始节点",
      //         type: "startNode",
      //         icon: require("../background/start.svg"),
      //       },
      //       {
      //         text: "普通节点",
      //         type: "dataExtraction",
      //         icon: require("../background/u1239.svg"),
      //       },
      //       {
      //         text: "合并节点",
      //         type: "dataMerge",
      //         icon: require("../background/u305.svg"),
      //       },
      //     ],
      //   },
      // ],
    },
  },
  data() {
    return { defaultIcon }
  },
  methods: {
    $_dragNode(item) {
      this.$emit('dragNode', item)
    },
  },
}
</script>
<style lang="scss" scoped>
.node-panel {
  position: absolute;
  top: 50px;
  left: 20px;
  width: 240px;
  height: calc(100% - 120px);
  min-height: 160px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 10px;
  box-sizing: content-box;
  background-color: white;
  box-shadow: 0 0 10px 1px rgb(228, 224, 219);
  border-radius: 6px;
  z-index: 101;
  .node-list {
    width: 240px;
    display: flex;
    flex-wrap: wrap;
  }
  .node-name {
    font-weight: 700;
    text-align: left;
    margin: 15px 0 5px;
  }
}
.node-item {
  width: 70px;
  margin-bottom: 10px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  &:hover {
    cursor: move;
    background: rgba(0, 0, 0, 0.04);
  }
}
.node-item-icon {
  width: 26px;
  height: 26px;
}
.node-label {
  font-size: 12px;
  margin-top: 5px;
  user-select: none;
}
</style>
